<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .msg::first-letter {
            color: red;
            font-size: 32px;
        }
        .msg::first-line {
            background-color: yellow;
        }
        .msg::selection {
            background-color: orange;
            color: green;
        }
        input[type='text']::placeholder {
            color: skyblue
        }
        .money>li::before {
            content: '¥ ';
            color: gold;
        }
        .money>li::after {
            content: '.00';
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>伪元素选择器</h1>
    <ul>
        <li>通过 <code>::first-letter</code> 选中第一个字母</li>
        <li>通过 <code>::first-line</code> 选中第一行</li>
        <li>通过 <code>::selection</code> 设置选中元素的样式</li>
        <li>通过 <code>::placeholder</code> 设置input的placeholder样式</li>
        <li>通过 <code>::before</code> 设置元素的起始处</li>
        <li>通过 <code>::after</code> 设置元素的结尾处</li>
    </ul>
    <p class="msg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit modi vitae excepturi, voluptates laboriosam rerum, nulla ullam natus dolor in reiciendis et debitis repudiandae architecto odit enim dolore inventore quaerat. Maxime voluptatem ad aliquam a, quisquam saepe eveniet officiis vitae libero tempora debitis ut totam, laborum repellat ipsam eos quidem, provident nisi. Iusto neque iste harum fuga illum cumque repellendus.</p>
    <input type="text" placeholder="请输入内容">
    <ul class="money">
        <li>99</li>
        <li>199</li>
        <li>299</li>
        <li>399</li>
        <li>499</li>
    </ul>
</body>
</html>